<script setup>
import Tab from "./tabs.vue";
import { onMounted, ref, watch } from "vue";
import { useRoute } from "vue-router";
import {
  getAccidentInfo,
  getAccidentFeedback,
  getAccidentRescuerList,
  getRescueMaterial,
  getRescueShipList,
  getRescueCarList,
  getSelectTaskPerson,
} from "../utils/apis";
const navTabs = ref([
  {
    value: 0,
    text: "救援人员",
  },
  {
    value: 1,
    text: "消防车辆",
  },
  {
    value: 2,
    text: "救援船舶",
  },
  {
    value: 3,
    text: "救援物资",
  },
]);
const view = ref(0);
const onSwitch = (e) => {
  view.value = e;
  if (e == 1) {
    getRescueCarListFn();
  } else if (e == 2) {
    getRescueShipListFn();
  } else if (e == 3) {
    getRescueMaterialFn();
  } else {
    getAccidentRescuerListFn();
  }
};
// tab
const tabList = () => {};
const accId = ref("");
const position = ref("");
const route = useRoute();
accId.value = route.query.id;
position.value = [route.query.lat, route.query.lon]; //任务地点
// 事故基本信息
const accInfo = ref({});
// 事故反馈信息
const feedbackInfo = ref({});
// 救援人员列表
const AccidentRescuerList = ref([]);
const bridgeAccidentId = ref("");

// 事故信息
const getAccidentInfoFn = () => {
  getAccidentInfo(accId.value).then((res) => {
    accInfo.value = res.data[0];
  });
};
const getAccidentFeedbackFn = () => {
  getAccidentFeedback(accId.value).then((res) => {
    feedbackInfo.value = res.data;
    bridgeAccidentId.value = res.data[0].bridgeAccidentId;
  });
};
// 救援人员
const getAccidentRescuerListFn = () => {
  getAccidentRescuerList(accId.value).then((res) => {
    AccidentRescuerList.value = res.data;
  });
};
// 救援物资
const getRescueMaterialFn = () => {
  getRescueMaterial(accId.value).then((res) => {
    AccidentRescuerList.value = res.data;
  });
};
// 救援船舶
const getRescueShipListFn = () => {
  getRescueShipList(accId.value).then((res) => {
    AccidentRescuerList.value = res.data;
  });
};
// 消防车辆
const getRescueCarListFn = () => {
  getRescueCarList(accId.value).then((res) => {
    AccidentRescuerList.value = res.data;
  });
};

// 电话弹窗
const showPhoneBox = ref(false);
const currentTime = ref(""); //任务时间
const phone = ref("");
const getPhone = (val) => {
  showPhoneBox.value = true;
  phone.value = val;
};

// 短信弹窗
const showMessageBox = ref(false);
const textVal = ref("");
const getMessage = (val) => {
  showMessageBox.value = true;
  phone.value = val;
};
// 关闭弹窗
const closeBtn = () => {
  showMessageBox.value = false;
};
const sureBtn = () => {
  // 关闭弹窗
  showMessageBox.value = false;
};

// 一键派送
const selectedPeople = ref("");
const selectedAdress = ref("" || position.value);

const selectTaskPersonList = ref([]);
const showOptionBox = ref(false);
// 点击显示人员菜单
const getOptionListFn = () => {
  showOptionBox.value = true;
};
const showSendBox = ref(false);
const sendFn = (e) => {
  // 0是省级 1是市级 2是业主
  showSendBox.value = true;
  selectTaskPersonList.value = [];
  getSelectTaskPerson(bridgeAccidentId.value).then((res) => {
    let list = res.data;
    if (e == 0) {
      list.map((el) => {
        if (el.type == "province") {
          selectTaskPersonList.value.push(el);
        }
      });
    } else if (e == 1) {
      list.map((el) => {
        if (el.type == "city") {
          selectTaskPersonList.value.push(el);
        }
      });
    } else if (e == 2) {
      list.map((el) => {
        if (el.type == "unit") {
          selectTaskPersonList.value.push(el);
        }
      });
    }
  });
};
const closeSendBtn = () => {
  showSendBox.value = false;
  showOptionBox.value = false;
  selectedPeople.value = "";
};
const sureSendBtn = () => {
  showSendBox.value = false;
  showOptionBox.value = false;
  selectedPeople.value = "";
};
// 选中某一个人
const getPeopleDetail = (val) => {
  // 选中关闭下拉框回显数据
  showOptionBox.value = false;
  selectedPeople.value = val.charge;
};
watch(
  accId,
  (newVal, oldVal) => {
    console.log("监听", newVal);
  },
  {
    deep: true,
    immediate: true,
  }
);
watch(selectedAdress, (newVal, oldVal) => {}, {
  deep: true,
  immediate: true,
});
onMounted(() => {
  getAccidentInfoFn();
  getAccidentFeedbackFn();
  getAccidentRescuerListFn();
});
</script>

<template>
  <div class="main">
    <!-- 背景图 -->
    <div class="backPicture">
      <img
        style="width: 100%"
        src="../static/images/banner.png"
        alt=""
        class="backPicture"
      />
    </div>
    <!-- 内容 -->
    <div class="message">
      <!-- 顶部基本信息 -->
      <div class="info">
        <div class="item">
          <div class="left">事故桥梁</div>
          <div class="right">{{ accInfo.bridgeName || "--" }}</div>
        </div>
        <div class="item">
          <div class="left">事故航道</div>
          <div class="right">{{ accInfo.waterwayName || "--" }}</div>
        </div>
        <div class="item">
          <div class="left">事故船舶</div>
          <div class="right">{{ accInfo.shipName || "--" }}</div>
        </div>
        <div class="item">
          <div class="left">人员落水</div>
          <div class="right">{{ accInfo.drowningNum }}</div>
        </div>
        <div class="item">
          <div class="left">人员伤亡</div>
          <div class="right">{{ accInfo.drowningNum }}</div>
        </div>
        <div class="item">
          <div class="left">是否溢油</div>
          <div class="right" v-if="accInfo.oilSpills == 0">否</div>
          <div class="right" v-if="accInfo.oilSpills == 1">是</div>
        </div>
        <div class="item">
          <div class="left">事故时间</div>
          <div class="right">{{ accInfo.accidentTime }}</div>
        </div>
        <div class="item">
          <div class="left">事故原因分析</div>
          <div class="right">{{ accInfo.accidentReson }}</div>
        </div>
      </div>
      <!-- 视频图片信息 -->
      <div class="contentBox">
        <div class="item">
          <div class="content">
            <div class="img">
              <img src="../static/images/demoBridge.png" alt="" srcset="" />
            </div>
            <div class="img">
              <img src="../static/images/beidgeDemo.png" alt="" srcset="" />
            </div>
            <div class="img">
              <img src="../static/images/demoBridge.png" alt="" srcset="" />
            </div>
            <div class="img">
              <img src="../static/images/beidgeDemo.png" alt="" srcset="" />
            </div>
            <div class="img">
              <img src="../static/images/beidgeDemo.png" alt="" srcset="" />
            </div>
            <div class="img">
              <img src="../static/images/demoBridge.png" alt="" srcset="" />
            </div>
          </div>
        </div>
        <div class="line"></div>
        <div class="item" style="margin-top: 16px">
          <div class="content">
            <div class="img">
              <img src="../static/images/demoSound.png" alt="" srcset="" />
            </div>
            <div class="img">
              <img src="../static/images/demoSound.png" alt="" srcset="" />
            </div>
            <div class="img">
              <img src="../static/images/demoSound.png" alt="" srcset="" />
            </div>
          </div>
        </div>
        <div class="line"></div>
        <div class="item" style="margin-top: 16px">
          <div class="content">
            <div class="img">
              <img src="../static/images/demoVideo.png" alt="" srcset="" />
            </div>
            <div class="img">
              <img src="../static/images/videoDemo.png" alt="" srcset="" />
            </div>
            <div class="img">
              <img src="../static/images/demoVideo.png" alt="" srcset="" />
            </div>
          </div>
        </div>
      </div>
      <!-- 任务派送 -->
      <div class="task">
        <div class="title">任务派送</div>
        <div class="content">
          <div class="taskItem">
            <div class="top">省级部门</div>
            <div class="bottom" @click="sendFn(0)">一键派送</div>
          </div>
          <div class="taskItem">
            <div class="top">市级部门</div>
            <div class="bottom" @click="sendFn(1)">一键派送</div>
          </div>
          <div class="taskItem">
            <div class="top">业主单位</div>
            <div class="bottom" @click="sendFn(2)">一键派送</div>
          </div>
        </div>
      </div>
      <!-- 现场反馈情况 -->
      <div class="feedbackSituation">
        <div class="feedTop">
          <div class="left">现场反馈情况</div>
          <div class="right">查看更多</div>
        </div>
        <div class="feedBottom">
          <div class="stepBox">
            <div class="stepItem" v-for="item in feedbackInfo" :key="item.id">
              <div class="stepContent">
                <div class="left">
                  <span style="color: #266fe8; font-size: 14px">
                    {{ item.feedbackTime }}
                  </span>
                  <span
                    style="
                      color: rgba(0, 0, 0, 0.9);
                      font-size: 12px;
                      display: block;
                    "
                  >
                    {{ item.content }}
                  </span>
                </div>
                <div class="right" v-if="item.image != null">
                  <img src="../static/images/beidgeDemo.png" alt="" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 底部tab -->
      <div class="tabBox">
        <div class="tabItem">
          <Tab :tabs="navTabs" @onSwitch="onSwitch" ref="headerTab"></Tab>
          <div class="listBox">
            <!-- 救援人员 -->
            <div class="itemBox" v-if="view == 0">
              <div class="item" v-for="item in AccidentRescuerList">
                <div class="itemTop">
                  <div class="itemTopOne">
                    <div class="left">{{ item.name }}</div>
                    <div class="right">
                      <div
                        class="itemTRightZero"
                        v-if="
                          item.status != '' ||
                          (item.status != null && item.status == 0)
                        "
                      >
                        待命中
                      </div>
                      <div
                        class="itemTRightOne"
                        v-else-if="
                          item.status != '' ||
                          (item.status != null && item.status == 1)
                        "
                      >
                        派遣中
                      </div>
                    </div>
                  </div>
                  <div class="itemTopTwo">{{ item.phone }}</div>
                  <div class="itemTopThree">{{ item.department }}</div>
                </div>
                <div class="itemBottom">
                  <div class="phoneBtn" @click="getPhone(item.phone)">
                    <van-icon class-prefix="my-icon" name="dianhua" /> 电话
                  </div>
                  <div class="messageBtn" @click="getMessage(item.phone)">
                    <van-icon class-prefix="my-icon" name="dianhua" />
                    短信
                  </div>
                </div>
              </div>
            </div>
            <!-- 消防车辆 -->
            <div class="itemBox" v-if="view == 1">
              <div class="item" v-for="item in AccidentRescuerList">
                <div class="itemTop">
                  <div class="itemTopOne">
                    <div class="left">{{ item.license }}</div>
                  </div>
                  <div class="itemTopTwo">{{ item.phone }}</div>
                  <div class="itemTopThree">{{ item.name }}</div>
                </div>
                <div class="itemBottom">
                  <div class="messageBtn" @click="getMessage(item.phone)">
                    短信
                  </div>
                </div>
              </div>
            </div>
            <!-- 救援船舶 -->
            <div class="itemBox" v-if="view == 2">
              <div class="item" v-for="item in AccidentRescuerList">
                <div class="itemTop">
                  <div class="itemTopOne">
                    <div class="left">{{ item.shipName }}</div>
                  </div>
                  <div class="itemTopTwo">{{ item.phone }}</div>
                  <div class="itemTopThree">{{ item.contactPerson }}</div>
                </div>
                <div class="itemBottom">
                  <div class="messageBtn" @click="getMessage(item.phone)">
                    短信
                  </div>
                </div>
              </div>
            </div>
            <!-- 救援物资 -->
            <div class="itemBox" v-if="view == 3">
              <div class="item" v-for="item in AccidentRescuerList">
                <div class="itemTop">
                  <div class="itemTopOne">
                    <div class="left">{{ item.materialName }}</div>
                  </div>
                  <div class="itemTopTwo">{{ item.phone }}</div>
                  <div class="itemTopThree">{{ item.contactPenson }}</div>
                </div>
                <div class="itemBottom">
                  <div class="messageBtn" @click="getMessage(item.phone)">
                    短信
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 一键派送弹窗 -->
      <van-popup v-model:show="showSendBox" :z-index="500">
        <div class="sendBox">
          <div class="title">
            <span>一键派送</span>
          </div>
          <div class="content">
            <div class="sendBoxItem">
              <div class="sendBoxItemLeft">任务人:</div>
              <div class="sendBoxItemRight">
                <input
                  class="chooseInput"
                  type="text"
                  placeholder="请选择"
                  readonly="readonly"
                  v-model="selectedPeople"
                  @click="getOptionListFn"
                />
                <div class="optionBox" v-if="showOptionBox">
                  <div class="optionItem">
                    <li
                      v-for="(item, index) in selectTaskPersonList"
                      @click="getPeopleDetail(item)"
                      :key="index"
                    >
                      {{ item.charge }}
                    </li>
                  </div>
                </div>
              </div>
            </div>
            <div class="sendBoxItem">
              <div class="sendBoxItemLeft">任务地点:</div>
              <div class="sendBoxItemRight">
                <input
                  type="text"
                  v-model="selectedAdress"
                  class="adressInput"
                />
              </div>
            </div>
            <div class="sendBoxItem">
              <div class="sendBoxItemLeft">任务时间:</div>
              <div class="sendBoxItemRight">
                <div class="timeBox">
                  <input
                    type="datetime-local"
                    v-model="currentTime"
                    class="timeInput"
                  />
                </div>
              </div>
            </div>
            <div class="sendBoxText">
              <div class="sendBoxItemLeft">任务描述:</div>
              <textarea
                v-model="textVal"
                style="
                  height: 80px;
                  border-radius: 4px;
                  text-indent: 6px;
                  width: 100%;
                  border: 1px solid rgba(0, 0, 0, 0.4);
                  display: flex;
                "
                class="sendBoxItemRight"
                placeholder="请输入任务内容,不超过140字"
              ></textarea>
            </div>
            <div class="sendBoxBtn">
              <div
                class="sendBoxBtnCancle"
                style="margin-right: 8px"
                @click="closeSendBtn"
              >
                取消
              </div>
              <div class="sendBoxBtnSure" @click="sureSendBtn">确定派送</div>
            </div>
          </div>
        </div>
      </van-popup>
      <!-- 电话弹窗 -->
      <van-popup v-model:show="showPhoneBox" closeable>
        <div class="phoneBox">
          <div class="title">
            <span>拨打电话</span>
          </div>
          <!-- <div class="content">手机号码:{{ phone }}</div> -->
          <a class="content" href="tel:phone">手机号码：{{ phone }}</a>
        </div>
      </van-popup>
      <!-- 短信弹窗 -->
      <van-popup v-model:show="showMessageBox" closeable>
        <div class="messageBox">
          <div class="title">
            <span>发送短信</span>
          </div>
          <div class="content">
            <div class="messageBoxPhone">
              <span style="padding-top: 4px">手机号码:</span
              ><span
                style="
                  border: 1px solid #ccc;
                  display: inline-block;
                  height: 30px;
                  line-height: 30px;
                  flex: 1;
                  border-radius: 4px;
                  text-indent: 6px;
                "
                >{{ phone }}</span
              >
            </div>
            <div class="messageBoxText">
              <div style="padding-top: 4px">短信内容:</div>
              <textarea
                v-model="textVal"
                style="
                  border: 1px solid #ccc;
                  display: inline-block;
                  height: 80px;
                  flex: 1;
                  border-radius: 4px;
                  text-indent: 6px;
                "
                placeholder="请输入发送内容,不超过140字"
              ></textarea>
            </div>
            <div class="messageBoxBtn">
              <div
                class="messageBoxBtnCancle"
                style="margin-right: 8px"
                @click="closeBtn"
              >
                取消
              </div>
              <div class="messageBoxBtnSure" @click="sureBtn">确定</div>
            </div>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.main {
  padding-bottom: 24px;
  .message {
    margin-left: 13px;
    margin-right: 19px;
    .info {
      padding: 16px;
      margin-top: 15px;
      background: #ffffff;
      box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
      border-radius: 6px 6px 6px 6px;
      .item {
        margin-bottom: 4px;
        font-size: 14px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.6);
        display: flex;
        justify-content: space-between;
        height: 22px;
        line-height: 22px;
      }
    }
    .contentBox {
      background: #ffffff;
      box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
      border-radius: 6px 6px 6px 6px;
      margin-top: 16px;
      padding: 16px;
      .item {
        .content {
          display: flex;
          flex-wrap: wrap;
          .img {
            img {
              width: 100px;
              height: 48px;
              border-radius: 2px 2px 2px 2px;
            }
            margin-right: 6px;
            margin-bottom: 4px;
          }
          .img:nth-child(2n) {
            margin-right: 5px;
          }
          .img:nth-child(3n) {
            margin-right: 0px;
          }
        }
      }
      .line {
        border: 1px solid rgba(0, 0, 0, 0.15);
        margin-top: 12px;
      }
    }
    .task {
      margin-top: 15px;
      height: 98px;
      background: #ffffff;
      box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
      border-radius: 6px 6px 6px 6px;
      padding: 17px 14px 15px 16px;
      .title {
        height: 22px;
        font-size: 14px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #000000;
        line-height: 22px;
        margin-bottom: 8px;
        position: relative;
      }
      .title::before {
        content: "";
        width: 2px;
        height: 16px;
        background: #276fe8;
        position: absolute;
        top: 2px;
        left: -16px;
      }
      .content {
        display: flex;
        .taskItem {
          width: 100px;
          height: 69px;
          border-radius: 6px 6px 6px 6px;
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: center;
          background: rgba(38, 111, 232, 0.1);
          .top {
            height: 20px;
            font-size: 12px;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: rgba(0, 0, 0, 0.9);
            line-height: 20px;
            margin-bottom: 6px;
          }
          .bottom {
            width: 60px;
            height: 25px;
            background: #266fe8;
            border-radius: 2px 2px 2px 2px;
            font-size: 12px;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: #ffffff;
            line-height: 25px;
            text-align: center;
          }
        }
        .taskItem:first-child {
          margin-right: 6px;
        }
        .taskItem:nth-child(2n) {
          margin-right: 5px;
        }
      }
    }
    .feedbackSituation {
      margin-top: 16px;
      height: 222px;
      background: #ffffff;
      box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
      border-radius: 6px 6px 6px 6px;
      padding: 16px 16px 0px 16px;
      .feedTop {
        display: flex;
        justify-content: space-between;
        margin-bottom: 16px;
        .left {
          height: 22px;
          font-size: 14px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #000000;
          line-height: 22px;
        }
        .right {
          height: 20px;
          font-size: 14px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #266fe8;
          line-height: 20px;
          position: relative;
          margin-right: 22px;
        }
        .right::after {
          font-family: "iconfont";
          content: "\e618";
          position: absolute;
          color: rgba(38, 111, 232, 0.9);
          width: 16px;
          height: 16px;
          right: -22px;
          text-align: center;
          line-height: 20px;
        }
      }
      .feedBottom {
        height: 200px;
        .stepBox {
          position: relative;
          margin-left: 4px;
          .stepItem {
            margin-left: 13px;
            position: relative;
            margin-bottom: 31px;
            .stepContent {
              display: flex;
              justify-content: space-between;
              align-items: center;
              .right > img {
                width: 94px;
                height: 52px;
              }
            }
          }
          .stepItem:last-child {
            margin-bottom: 0px;
          }
          .stepItem::before {
            content: "";
            position: absolute;
            width: 9px;
            height: 9px;
            background: #93b7f3;
            // background: rgba(38,111,232,0.9);
            border-radius: 4.5px;
            left: -17px;
            top: 0;
          }
          .stepItem:first-child ::before {
            content: "";
            position: absolute;
            width: 9px;
            height: 9px;
            background: rgba(38, 111, 232, 0.9);
            border-radius: 4.5px;
            left: -17px;
            top: 0;
          }
        }
        .stepBox::before {
          content: "";
          height: 80%;
          width: 1px;
          background: rgba(38, 111, 232, 0.2);
          position: absolute;
          top: 0;
          left: 0;
        }
      }
    }
    .tabBox {
      margin-top: 16px;
      background: #ffffff;
      box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
      border-radius: 6px 6px 6px 6px;
      padding: 16px 10px 12px 10px;
      .tabItem {
        .listBox {
          .itemBox {
            display: flex;
            flex-wrap: wrap;
            margin-top: 25px;
            .item {
              width: 132px;
              height: 98px;
              flex-direction: column;
              justify-content: center;
              background: #ffffff;
              box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
              border-radius: 6px 6px 6px 6px;
              padding: 12px;
              margin-bottom: 10px;
              .itemTop {
                .itemTopOne {
                  display: flex;
                  justify-content: space-between;
                  .left {
                    font-size: 14px;
                    font-family: PingFang SC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #000000;
                  }
                }
                .itemTopTwo,
                .itemTopThree {
                  margin-top: 6px;
                  font-size: 12px;
                  font-family: PingFang SC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #000000;
                }
                .itemTLeft {
                  font-size: 14px;
                  font-family: PingFang SC-Medium, PingFang SC;
                  font-weight: 500;
                  color: #000000;
                  line-height: 20px;

                  span {
                    display: block;
                    font-size: 12px;
                    font-family: PingFang SC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #000000;
                  }
                }
                .itemTRightOne {
                  font-size: 12px;
                  font-family: PingFang SC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #00c462;
                }
                .itemTRightZero {
                  font-size: 12px;
                  font-family: PingFang SC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #e10000;
                }
              }
              .itemBottom {
                display: flex;
                justify-content: space-between;
                .phoneBtn,
                .messageBtn {
                  width: 60px;
                  height: 24px;
                  border-radius: 4px 4px 4px 4px;
                  opacity: 1;
                  border: 1px solid #266fe8;
                  line-height: 24px;
                  text-align: center;
                  font-size: 12px;
                  font-family: PingFang SC-Medium, PingFang SC;
                  font-weight: 500;
                  color: #266fe8;
                  margin-top: 10px;
                }
              }
            }
            .item:nth-child(2n) {
              margin-left: 11px;
            }
          }
        }
      }
    }
    // 电话弹窗
    .phoneBox {
      width: 310px;
      height: 120px;
      background: #ffffff;
      box-shadow: 2px 4px 16px 2px rgba(47, 114, 191, 0.35);
      display: flex;
      flex-direction: column;
      align-items: center;
      .title {
        margin-top: 16px;
        margin-bottom: 8px;
        font-size: 20px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.9);
        display: flex;
        flex-direction: row;
      }
      .content {
        font-size: 16px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.9);
        display: block;
        margin-top: 16px;
      }
    }
    :deep(.van-popup--center) {
      border-radius: 6px;
    }
    // 短信弹窗
    .messageBox {
      width: 320px;
      height: 260px;
      background: #ffffff;
      box-shadow: 2px 4px 16px 2px rgba(47, 114, 191, 0.35);
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-bottom: 8px;
      .title {
        margin-top: 16px;
        margin-bottom: 8px;
        font-size: 20px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.9);
      }
      .content {
        width: 90%;
        .messageBoxPhone {
          display: flex;
          margin-bottom: 16px;
        }
        .messageBoxText {
          display: flex;
        }
        .messageBoxBtn {
          display: flex;
          justify-content: flex-end;
          -webkit-justify-content: flex-end;
          -ms-justify-content: flex-end; /* IE 10 */
          justify-content: flex-end; /* NEW, Spec - Opera 12.1, Firefox 20+ */
          -webkit-box-justify-content: flex-end; /* OLD - iOS 6-, Safari 3.1-6 */
          -moz-box-justify-content: flex-end; /* OLD - Firefox 19- */
          margin-top: 16px;
          .messageBoxBtnCancle {
            border: 1px solid #ccc;
            background: #ffffff;
            color: rgba(0, 0, 0, 0.9);
            width: 105px;
            height: 40px;
            border-radius: 4px 4px 4px 4px;
            text-align: center;
            line-height: 40px;
            font-size: 16px;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
          }
          .messageBoxBtnSure {
            width: 105px;
            height: 40px;
            background: #266fe8;
            border-radius: 4px 4px 4px 4px;
            text-align: center;
            line-height: 40px;
            font-size: 16px;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: #ffffff;
          }
        }
      }
    }
    // 一键派送
    .sendBox {
      width: 320px;
      height: 70%;
      background: #ffffff;
      box-shadow: 2px 4px 16px 2px rgba(47, 114, 191, 0.35);
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-bottom: 16px;
      .title {
        margin-top: 16px;
        margin-bottom: 8px;
        font-size: 20px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.9);
      }
      .content {
        width: 90%;
        -webkit-width: 90%;
        -ms-width: 90%; /* IE 10 */
        width: 90%; /* NEW, Spec - Opera 12.1, Firefox 20+ */
        -webkit-box-width: 90%; /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-width: 90%; /* OLD - Firefox 19- */
        .sendBoxItem {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 8px;
          font-size: 16px;
          .sendBoxItemLeft {
            width: 26%;
            -webkit-width: 26%;
            -ms-width: 26%; /* IE 10 */
            width: 26%; /* NEW, Spec - Opera 12.1, Firefox 20+ */
            -webkit-box-width: 26%; /* OLD - iOS 6-, Safari 3.1-6 */
            -moz-box-width: 26%; /* OLD - Firefox 19- */
          }
          .sendBoxItemRight {
            -webkit-flex: 1; /* Chrome */
            -ms-flex: 1; /* IE 10 */
            flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
            -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
            -moz-box-flex: 1; /* OLD - Firefox 19- */
            flex: 1;
            border: 1px solid rgba(0, 0, 0, 0.4);
            height: 28px;
            line-height: 28px;
            border-radius: 4px;
            .chooseInput {
              outline: none;
              border: none;
              height: 20px;
            }
            // 任务地点
            .adressInput {
              outline: none;
              border: none;
              height: 20px;
            }
            .timeBox {
              width: 99%;
              .timeInput {
                outline: none;
                border: none;
                height: 20px;
                background: #fff;
                width: 100%;
                -webkit-appearance: none; //隐藏移动端小箭头
              }
            }
            .optionBox {
              height: 80px;
              background: #ffffff;
              width: 100%;
              position: relative;
              overflow: hidden;
              .optionItem {
                position: absolute;
                height: auto;
                width: calc(100% + 12px);
                height: calc(100% + 12px);
                overflow: scroll;
                top: 0;
                background: #fff;
                li {
                  margin: 0;
                  padding-left: 8px;
                  list-style: none;
                  color: #000000;
                  background: #fff;
                }
              }
            }
          }
        }
        .sendBoxText {
          display: flex;
          justify-content: space-between;
          margin-bottom: 60px;
          .sendBoxItemLeft {
            width: 26%;
          }
          .sendBoxItemRight {
            flex: 1;
            border: 1px solid rgba(0, 0, 0, 0.4);
            height: 50px;
            line-height: 28px;
            border-radius: 4px;
          }
        }
        .sendBoxBtn {
          display: flex;
          justify-content: end;
          margin-top: 16px;
          .sendBoxBtnCancle {
            border: 1px solid #ccc;
            background: #ffffff;
            color: rgba(0, 0, 0, 0.9);
            width: 50%;
            height: 40px;
            border-radius: 4px 4px 4px 4px;
            text-align: center;
            line-height: 40px;
            font-size: 16px;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
          }
          .sendBoxBtnSure {
            width: 50%;
            height: 40px;
            background: #266fe8;
            border-radius: 4px 4px 4px 4px;
            text-align: center;
            line-height: 40px;
            font-size: 16px;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: #ffffff;
          }
        }
      }
    }
  }
}
</style>